<template>
  <lc-crud
    ref="curd"
    :default-sort="{
      prop: 'createTime',
      order: 'ascending'
    }"
    :operator="operator"
    :column="column"
    :search="search"
    :search-span="7"
    data="/lc-system/logger"
  />
</template>
<script setup lang="ts">
import { TCrudComponent } from "@/components/crud/interface";
import {
  ITableColumn,
  STExposeComponent,
  TOporaterOption
} from "@/components/st/interface";
import LcCrud from "@/components/crud/crud.vue";
import { ref } from "vue";
import { NzSafeAny } from "@/components/sf/type";
import { DateUI, SelectUI } from "@/components/sf/interface";
import { Http } from "@/core/api/http.service";
import { Helper } from "@/core/helper/helper.service";
import Detail from "./detail/index.vue";
import { useAclHooks } from "@/core/pinia/store/acl.store";
defineOptions({
  name: "logger"
});
const curd = ref<TCrudComponent>(null);
const operator = { addHide: true } as TOporaterOption;
const acls = useAclHooks();
const search = {
  properties: {
    category: {
      title: "日志分类",
      ui: {
        placeholder: "请选择日志分类",
        widget: "select",
        clearable: true,
        items: () => Http.of().get("/lc-system/dict/enum/logger_type")
      } as SelectUI
    },
    startTime: {
      title: "请求时间",
      ui: {
        startPlaceholder: "请选择开始时间",
        endPlaceholder: "请选择结束时间",
        type: "datetimerange",
        widget: "date"
      } as DateUI
    }
  }
};
const column = [
  {
    type: "selection",
    prop: "id"
  },
  {
    prop: "category",
    label: "日志类型",
    type: "tags",
    tags: {
      login: { text: "登录日志", type: "success" },
      handler: { text: "操作日志", type: "info" },
      exception: { text: "异常日志", type: "danger" },
      other: { text: "其他日志", type: "" }
    }
  },
  {
    prop: "clientIp",
    label: "ip地址"
  },
  {
    prop: "requestUri",
    showOverflowTooltip: true,
    label: "请求地址"
  },
  {
    prop: "method",
    label: "请求类型",
    type: "tags",
    tags: {
      POST: { text: "POST", type: "success" },
      GET: { text: "GET", type: "info" },
      PATCH: { text: "PATCH", type: "warning" },
      DELETE: { text: "DELETE", type: "danger" }
    }
  },
  {
    prop: "startTime",
    type: "date",
    sortable: true,
    dateFormat: "YYYY/MM/DD HH:mm",
    label: "开始时间"
  },
  {
    prop: "endTime",
    type: "date",
    sortable: true,
    dateFormat: "YYYY/MM/DD HH:mm",
    label: "结束时间"
  },
  {
    prop: "operator.name",
    formatter: (row: { operator: { name: string } }) => {
      return row?.operator?.name || "-";
    },
    label: "操作人员"
  },
  {
    label: "查看详情",
    acl: {
      points: acls.getAclArray("logger_detail"),
      mode: "oneOf"
    },
    buttons: [
      {
        text: "查看",
        icon: "ant-design:eye-filled",
        acl: { points: [acls.getMenuAcl("logger_detail")] },
        click: (data: NzSafeAny, _: STExposeComponent) => lookDetail(data?.id)
      }
    ]
  }
] as ITableColumn[];
const lookDetail = (id: string) => {
  Helper.showDialog({
    title: "查看详情",
    i: { log: id },
    footer: false,
    size: "md",
    component: Detail,
    noFooter: true,
    popOption: {
      closeOnPressEscape: true,
      closeOnClickModal: true
    }
  }).subscribe();
};
</script>
@/components/st/interfaces @/components/crud/interfaces
@/components/sf/interfaces @/components/sf/types
